<template>
  <div>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="编号" ref="DropNumber">
          <Popover
            :required="false"
            label="编号"
            Type="input"
            v-model="queryParams.Number"
          />
          <div class="pd10">
            <van-button type="primary" block round @click="getList(true)">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <div v-if="deviceInfo.Category != 2">
          <van-dropdown-item
            v-model="queryParams.Finish_Result"
            :options="option1"
            @change="getList(true)"
          />
          <van-dropdown-item
            v-model="queryParams.IsFinish"
            :options="option2"
            @change="getList(true)"
          />
        </div>
        <div v-if="deviceInfo.Category == 2">
          <van-dropdown-item
            v-model="queryParams.Finish_ResultTools"
            :options="option3"
            @change="getList(true)"
          />
          <van-dropdown-item
            v-model="queryParams.IsFinish"
            :options="option4"
            @change="getList(true)"
          />
        </div>
      </van-dropdown-menu>
    </van-sticky>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      style="min-height: 100%"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="300"
      >
        <div class="tableRow" v-for="item in tableList" @click="goDetail(item)">
          <div style="width:15%">
            <van-tag plain type="primary" size="medium">{{
              $filterUserName(item.CreateUser)
            }}</van-tag>
          </div>
          <div style="width:50%">{{ item.Number }}</div>
          <div style="width:25%" v-if="item.ID_MaintainPlan != 0">{{ item.Name_Maintain }}</div>
          <div style="width:25%" v-if="item.ID_MaintainPlan == 0">外校</div>
          <div style="width:10%" class="flex jcenter acenter">
            <div v-if="item.FinishTime">
              <div v-if="deviceInfo.Category == 1">
                <el-tag
                  v-if="item.Finish_Result == 1"
                  type="success"
                  effect="dark"
                  >合格</el-tag
                >
                <el-tag
                  v-if="item.Finish_Result == 2"
                  type="danger"
                  effect="dark"
                  >不合格</el-tag
                >
              </div>
              <div v-if="deviceInfo.Category == 2">
                <el-tag
                  v-if="item.Finish_ResultTools == 1"
                  type="success"
                  effect="dark"
                  >正常</el-tag
                >
                <el-tag
                  v-if="item.Finish_ResultTools == 2"
                  type="danger"
                  effect="dark"
                  >降级</el-tag
                >
                <el-tag
                  v-if="item.Finish_ResultTools == 3"
                  type="info"
                  effect="dark"
                  >报废</el-tag
                >
              </div>
            </div>
            <div v-else>
              <div v-if="deviceInfo.Category == 1">
                <el-tag type="warning" effect="dark">保养中</el-tag>
              </div>
              <div v-if="deviceInfo.Category == 2">
                <el-tag type="warning" effect="dark">校验中</el-tag>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup name="MaintainLogList">
import { GetMaintainDataList_Page } from '@/api/teachDevice/maintain.js';
import { onMounted, ref } from 'vue';
import { category, checkType } from '@/views/Amobile/DeviceManage/conmon.js';
import { GetDeviceDetail } from '@/api/teachDevice/account.js';
import { useRoute, useRouter } from 'vue-router';
import defaultSettings from '@/settings';
const route = useRoute();
const router = useRouter();
const page = ref({
  PageIndex: 0,
  PageSize: 10
});
const Total = ref(0);
const tableList = ref([]);
const queryParams = ref({
  IsFinish: '',
  Finish_Result: '',
  Finish_ResultTools: ''
});
const DropNumber = ref({});
const option1 = ref([
  { text: '全部结果', value: '' },
  { text: '合格', value: 1 },
  { text: '不合格', value: 2 }
]);
const option2 = ref([
  { text: '全部状态', value: '' },
  { text: '保养完成', value: 'true' },
  { text: '保养中', value: 'false' }
]);
const option3 = ref([
  { text: '全部结果', value: '' },
  { text: '正常', value: 1 },
  { text: '降级', value: 2 },
  { text: '报废', value: 3 }
]);
const option4 = ref([
  { text: '全部状态', value: '' },
  { text: '检验完成', value: 'true' },
  { text: '检验中', value: 'false' }
]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const deviceInfo = ref({});

onMounted(() => {
  getDeviceDtailFun();
});

async function getDeviceDtailFun() {
  try {
    let res = await GetDeviceDetail({ ID: route.query.ID });
    deviceInfo.value = res.data.Info;
    document.title =
      checkType[deviceInfo.value.Category] +
      '记录' +
      ' - ' +
      defaultSettings.title;
  } catch (error) {
    console.log(error);
  }
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  tableList.value = [];
  page.value.PageIndex = 0;
  loading.value = true;
  onLoad();
};
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      tableList.value = [];
      refreshing.value = false;
    }
    page.value.PageIndex++;
    getList();
  }, 1000);
};
async function getList(bool = false) {
  if (bool) {
    DropNumber.value.toggle(false);
    onRefresh();
    return;
  }
  try {
    let query = {
      ...page.value,
      ...queryParams.value,
      NoPage: '',
      Device: route.query.ID
    };
    let res = await GetMaintainDataList_Page(query);
    tableList.value = [...tableList.value, ...res.data.List];
    //判断是否是校验
    loading.value = false;
    Total.value = res.data.Total;
    if (tableList.value.length >= Total.value) {
      //将返回数据长度与总条数进行比较控制加载不加载的状态
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
}
function goDetail(item) {
  router.push({ path: '/DeviceManage/MaintainDetail', query: { ID: item.ID } });
}
onMounted(() => {
  // getList();
});
</script>

<style lang="scss" scoped>
.tableRow {
  display: flex;
  padding: 10rpx 10rpx 6rpx;
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid #eee;
  align-items: center;
  // justify-content: space-between;
  &>div{
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
  }
}
</style>
